<script lang="ts" setup>
import { getPartnerConfig } from '@/network/api'
import { ref, onMounted } from 'vue'
import resizeRank from '@/util/screen'

const module2 = ref() as any
const rank = ref(0) /* 1为手机端 */


getPartnerConfig().then(res => {
    module2.value = JSON.parse(res.data.module2)
})

const toParnterWeb = (item: any) => {
    if (item.link) {
        window.open(item.link)
    }
}

onMounted(() => {
      /**
       * @methods 判定pc&movie
       */
      rank.value = resizeRank(rank.value)
      window.addEventListener('resize', () => {
        let screenWidth = document.body.clientWidth
        if (screenWidth < 768) {
          rank.value = 1
        } else {
          rank.value = 0
        }
      })
    })
</script>

<template>
    <div>
        <div class="bigTitle">合作伙伴</div>
        <div class="module2Content">
            <el-row class="width100" justify="space-between" :gutter="rank == 1 ? 0 : 30">
                <el-col :span="4" :xs="11" v-for="(item,index) in module2" :key="index">
                    <div class="parnterLogo" :class="item.link ? 'pointer' : ''" @click="toParnterWeb(item)">
                        <img :src="item.url" alt="" class="parnterLogoImg">
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.module2Content {
    padding: 40px 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .parnterLogo {
        // width: 18%;
        border: 1px solid #FDFEFF;
        border-radius: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 20px;
        background-color: #fff;
        margin-bottom: 30px;

        img {
            width: 100%;
            transition: all 0.5s;
            border-radius: 20px;
        }

        img:hover {
            transform: scale(1.2);
        }
    }
}

@media screen and (max-width: 450px){
    .parnterLogo{
        width: 100% !important;
        margin-bottom: 20px;
    }
}
</style>